<template>
  <div>
    <div style="margin: 3px;">
      <h1 style="font-size: 30px;text-align: center;">站点账号信息</h1>
      <el-button style="float: left;" @click="add" type="primary">新增站点账号</el-button>
      <!-- <el-button style="float: left;margin-left: 960px;" @click="updateBtn(recycle)" type="primary">修改回收人信息</el-button> -->
      <!-- 弹框 -->
      <el-dialog title="新增账号信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <el-form ref="accountInfo" :model="accountInfo" label-width="100px">
          <el-form-item label="账号">
            <el-input v-model="accountInfo.siteAccount"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 列表 -->
      <div style="border: 1px silver solid;width: 1200px;height: 500px;margin-top: 42px;">
        <el-table ref="multipleTable" :data="accountList"  style="width: 100%;" >
          <el-table-column  type="index"  width="70">
          </el-table-column>
          <el-table-column prop="siteAccount"  label="账号" width="180">
          </el-table-column>
          <el-table-column  label="账号状态" width="150">
            <template slot-scope="scope">
              <span>
                {{scope.row.state==0?"正常":scope.row.state==1?"禁用":"删除"}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="creatTime"  label="创建时间" width="180">
          </el-table-column>
          <el-table-column prop="updateTime"  label="更新时间" width="180">
          </el-table-column>
          <el-table-column prop="operator"  label="操作人" width="150">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="220">
            <template slot-scope="scope">
              <el-button type="primary" @click="setState(scope.row,1)" size="small">禁用</el-button>
              <el-button type="primary" @click="setState(scope.row,0)" size="small">启用</el-button>
              <el-button type="danger" @click="setState(scope.row,2)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "SiteSelectSiteAccount",
    data() {
      return {
        accountInfo:{},
        dialogVisible:false,
        accountList:[]
      }
    },
    methods: {
      // 确定按钮
      confirm(){
        this.$http.post("/site/siteAccount/addOrdinary.site",this.accountInfo).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.accountInfo = {}
            this.showSiteAccount()
            this.dialogVisible = false
          }else{
            alert(resp.data.message)
          }
        })
      },

      // 取消按钮
      cancel(){
        this.accountInfo = {}
         this.dialogVisible = false
      },

      // 新增按钮
      add(){
        this.dialogVisible = true
      },

      // 弹框取消按钮
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      setState(row,state){
        this.$http.post("/site/siteAccount/setOrdinary.site",{accountId:row.accountId,state:state}).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.showSiteAccount()
          }else{
            alert(resp.data.message)
          }
        })
      },

      showSiteAccount(){
        this.$http.post("/site/siteAccount/selectOrdinary.site").then(resp=>{
          if(resp.data.code==200){
            this.accountList=resp.data.data
          }else{
            alert(resp.data.message)
          }
        })
      }

    },
    created() {
      this.showSiteAccount()
    }

  }
</script>

<style>
</style>
